<template>
  <div class="statistics-container">
    <div class="stat-card">
      <h3 class="card-title">警情分析</h3>
      <div class="stat-grid">
        <div class="stat-item">
          <div class="label">本月警情</div>
          <div class="value">156</div>
          <div class="trend up">+12%</div>
        </div>
        <div class="stat-item">
          <div class="label">已处理</div>
          <div class="value">142</div>
          <div class="trend">91%</div>
        </div>
        <div class="stat-item">
          <div class="label">平均响应</div>
          <div class="value">5分钟</div>
          <div class="trend down">-2分钟</div>
        </div>
        <div class="stat-item">
          <div class="label">处置率</div>
          <div class="value">98%</div>
          <div class="trend up">+3%</div>
        </div>
      </div>
    </div>

    <div class="stat-card">
      <h3 class="card-title">社区治安</h3>
      <div class="stat-list">
        <div class="list-item">
          <span class="item-label">摄像头在线率</span>
          <div class="progress-bar">
            <div class="progress" style="width: 98%"></div>
          </div>
          <span class="item-value">98%</span>
        </div>
        <div class="list-item">
          <span class="item-label">巡逻覆盖率</span>
          <div class="progress-bar">
            <div class="progress" style="width: 95%"></div>
          </div>
          <span class="item-value">95%</span>
        </div>
        <div class="list-item">
          <span class="item-label">隐患整改率</span>
          <div class="progress-bar">
            <div class="progress" style="width: 92%"></div>
          </div>
          <span class="item-value">92%</span>
        </div>
        <div class="list-item">
          <span class="item-label">群众满意度</span>
          <div class="progress-bar">
            <div class="progress" style="width: 96%"></div>
          </div>
          <span class="item-value">96%</span>
        </div>
        <div class="list-item">
          <span class="item-label">护学岗到位率</span>
          <div class="progress-bar">
            <div class="progress" style="width: 100%"></div>
          </div>
          <span class="item-value">100%</span>
        </div>
      </div>
    </div>

    <div class="stat-card">
      <h3 class="card-title">便民服务</h3>
      <div class="service-stats">
        <div class="service-item">
          <div class="service-header">
            <div class="service-icon document"></div>
            <div class="service-name">证明办理</div>
          </div>
          <div class="service-content">
            <div class="service-value">12件</div>
            <div class="service-trend">今日办理</div>
            <div class="service-trend">本周累计: 68件</div>
          </div>
        </div>
        <div class="service-item">
          <div class="service-header">
            <div class="service-icon mediation"></div>
            <div class="service-name">纠纷调解</div>
          </div>
          <div class="service-content">
            <div class="service-value">8起</div>
            <div class="service-trend">本周调解</div>
            <div class="service-trend up">调解成功率: 96%</div>
          </div>
        </div>
        <div class="service-item">
          <div class="service-header">
            <div class="service-icon help"></div>
            <div class="service-name">求助处理</div>
          </div>
          <div class="service-content">
            <div class="service-value">45起</div>
            <div class="service-trend">本月处理</div>
            <div class="service-trend down">同比下降: 15%</div>
          </div>
        </div>
        <div class="service-item">
          <div class="service-header">
            <div class="service-icon volunteer"></div>
            <div class="service-name">志愿服务</div>
          </div>
          <div class="service-content">
            <div class="service-value">280人次</div>
            <div class="service-trend">本月参与</div>
            <div class="service-trend">服务时长: 560小时</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataStatistics'
}
</script>

<style scoped>
.statistics-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 15px;
}

.card-title {
  color: #00c6ff;
  font-size: 18px;
  margin: 0 0 15px 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 10px;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-item .label {
  color: #7eb9ff;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-item .value {
  font-size: 24px;
  color: #00c6ff;
  margin-bottom: 5px;
}

.trend {
  font-size: 12px;
  color: #7eb9ff;
}

.trend.up {
  color: #52c41a;
}

.trend.down {
  color: #ff4d4f;
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-label {
  width: 100px;
  color: #7eb9ff;
}

.item-value {
  width: 50px;
  text-align: right;
  color: #00c6ff;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #00c6ff;
  border-radius: 3px;
}

.service-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.service-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s ease;
}

.service-item:hover {
  background: rgba(0, 24, 48, 0.5);
  border-color: rgba(0, 198, 255, 0.3);
  transform: translateY(-2px);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.service-icon {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(0, 198, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #00c6ff;
}

.service-name {
  color: #7eb9ff;
  font-size: 15px;
  font-weight: 500;
}

.service-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-value {
  color: #00c6ff;
  font-size: 20px;
  font-weight: 600;
  font-family: DIN;
}

.service-trend {
  color: #7eb9ff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.service-trend.up {
  color: #52c41a;
}

.service-trend.down {
  color: #ff4d4f;
}

.service-icon.document::before {
  content: "📄";
}

.service-icon.mediation::before {
  content: "🤝";
}

.service-icon.help::before {
  content: "🆘";
}

.service-icon.volunteer::before {
  content: "👥";
}
</style> 